<template>
	<view ref="player"></view>
</template>

<script>
    import Vap from 'video-animation-player'
    import config from '../../static/vap/demo.json'

    export default {
        name: "txvap",

        mounted() {
            this.vap = new Vap({
                container: this.$refs.player.$el,
                // 素材视频链接
                src: require("../../static/vap/demo.mp4"),
                // 素材配置json对象
                config: config,
                width: 900,
                height: 600,
                // 同素材生成工具中配置的保持一致
                fps: 20,
                // 是否循环
                loop: true,
                // 起始播放时间点
                beginPoint: 0,
                // 精准模式
                accurate: true,
                // 播放起始时间点(秒)
                type: 1
            }).on('playing', () => {
                    console.log('playing')
                })
                .on('ended', () => {
                    this.vap = null
                    console.log('play ended')
                })
                .on('frame', (frame, timestamp) => {
                    // frame: 当前帧(从0开始)  timestamp: (播放时间戳)
                    console.log(frame, '-------', timestamp)
                })
            this.vap.play()
        },
        beforeDestroy() {
            this.vap.destroy()
        }
    }

</script>

<style scoped>

</style>
